<template>
	<view class="zong">
		<!-- 头像区域 -->
		<view class="toutop">
			<image :src="userinfo.avatarUrl"></image>
			<view class="name">{{userinfo.nickName}}</view>
		</view>

		<view class="toubottom">
			<ul>
				<li @click="showDialogBoxInput">
					<text>{{money}}</text>
					<text>账户余额</text>
				</li>

				<li>
					<text>14</text>
					<text>收藏的商品</text>
				</li>

			</ul>
		</view>

		<view class="dingdan">
			<text class="wenzi">我的订单</text>
			<ul>
				<li @click="gotoOrderList(0)">
					<image src="/static/my-icons/icon4.png"></image>
					<text>全部订单</text>
				</li>
				<li @click="gotoOrderList(1)">
					<image src="/static/my-icons/icon1.png"></image>
					<text>待发货</text>
				</li>

				<li @click="gotoOrderList(2)">
					<image src="/static/my-icons/icon2.png"></image>
					<text>待收货</text>
				</li>

				<li @click="gotoOrderList(3)">
					<image src="/static/my-icons/icon3.png"></image>
					<text>退款/退货</text>
				</li>
			</ul>
		</view>

		<view class="thelast">
			<ul>
				<li>
					<text>收货地址</text>
					<text>></text>
				</li>

				<li>
					<text>联系客服</text>
					<text>></text>
				</li>

				<li @click="logout">
					<text>退出登录</text>
					<text>></text>
				</li>
			</ul>
		</view>
		<!-- 提示框 -->
		<cc-defineDialogBox ref="DialogBox"></cc-defineDialogBox>
		<!-- 支付框-->
		<!-- <passkeyborad :show="show" @close="close" @success="success" :zongjiage="money"></passkeyborad> -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	// import passkeyborad from '@/components/yzc-paykeyboard/yzc-paykeyboard.vue'
	export default {
		name: "my-userinfo",
		data() {
			return {
				show: false
			}
		},
		computed: {
			...mapState('m_user', ['userinfo']),
			...mapState('m_account', ['money'])
		},
		methods: {
			...mapMutations('m_user', ['updateUserInfo', 'updateToken', 'updateAddress']),
			...mapMutations('m_account', ['addmoney']),
			close() {
				this.show = false
			},
			// 0-全部订单，1-待发货，2-待收货，3-退款/退货
			gotoOrderList(index) {
				uni.navigateTo({
					url: '/pages/orderList/orderList?index=' + index
				})
			},
			// 退出登录
			async logout() {
				// 询问用户是否退出登录
				const [err, succ] = await uni.showModal({
					title: '提示',
					content: '确认退出登录吗？'
				}).catch(err => err)

				if (succ && succ.confirm) {
					// 用户确认了退出登录的操作
					// 需要清空 vuex 中的 userinfo、token 和 address
					this.updateUserInfo({})
					this.updateToken('')
					this.updateAddress({})
				}
			},
			// 显示输入弹框
			showDialogBoxInput() {
				this.$refs['DialogBox'].confirm({
					title: '请输入金额',
					placeholder: '请输入充值的金额',
					value: this.smoney,
					DialogType: 'input',
					animation: 0
				}).then((res) => {
					// 输入框返回值res
					this.show = true
					uni.showToast({
						title: '充值成功'
					});
					this.addmoney(res.value)
				})
			},
			success() {
				this.close()
				this.money = this.smoney
			}

		}
	}
</script>

<style lang="scss">
	.zong {
		background-color: #f4f4f4;
		height: 100vh;

		.toutop {
			height: 400rpx;
			background-color: #c00000;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 90px;
				height: 90px;
				display: block;
				border-radius: 45px;
				border: 2px solid white;
				box-shadow: 0px 1px 5px black;
			}

			.name {
				padding-top: 15px;
				color: white;
				font-size: 16px;
				font-weight: 700;
			}
		}

		.toubottom {
			background-color: white;
			position: relative;
			height: 70px;
			margin: 0 10px;
			top: -10px;
			border-radius: 5px;

			ul {
				list-style: none;
				display: flex;
				justify-content: space-around;
				height: 100%;

				li {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}
			}
		}

		.dingdan {
			height: 130px;
			margin: 10px;
			background-color: white;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.wenzi {
				font-size: 17px;
				padding-left: 10px;
			}

			ul {
				display: flex;
				list-style: none;
				justify-content: space-around;
				align-items: center;

				li {
					display: flex;
					flex: 1;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					image {
						width: 35px;
						height: 35px;
						padding-bottom: 5px;
					}
				}
			}
		}

		.thelast {
			height: 150px;
			margin: 20px 10px;
			background-color: white;

			ul {
				list-style: none;
				height: 100%;
				display: flex;
				flex-direction: column;
			}

			li {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 17px;

				text {
					padding: 0 15px;
				}
			}
		}

	}
</style>